<template>
    <div>
        <a-card title="成绩管理" style="width: 100%">
            <template #extra> <a-button type="primary" @click="openAddScore">添加成绩</a-button></template>
            <a-table :dataSource="dataSource" :columns="columns">
            </a-table>
        </a-card>

        <div>
            <a-modal v-model:open="open" title="添加成绩">
                学号：<a-input style="margin: 10px 5px 10px 4px;width:40%" v-model:value="temStudent.studentNo"
                    placeholder="请输入学生学号" />
                <a-button type="primary" @click="getStudentByNo(temStudent.studentNo)">查询</a-button>
                <p>姓名：<span style="margin-left:5px">{{ temStudent.studentName }}</span></p>
                课程：
                <a-select ref="select" v-model:value="temStudent.courseName" style="width: 40%" @focus="focus"
                    @change="handleChange">
                    <a-select-option v-for="item in courseList" :key="item.courseId" :value="item.courseName">{{
                        item.courseName
                    }}</a-select-option>
                </a-select>
                <p>
                    分数：<a-input style="margin: 10px 5px 10px 4px;width:40%" v-model:value="temStudent.score"
                        placeholder="请输入分数" />
                </p>
                <template #footer>
                    <a-button key="back" @click="open = false">取消</a-button>
                    <a-button key="submit" type="primary" @click="saveScore">确定</a-button>
                </template>
            </a-modal>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import score from '../../api/score.js'
import student from '../../api/student.js'
import course from '../../api/course.js'
const columns = ref([
    {
        title: '学号',
        dataIndex: 'studentNo',
    },
    {
        title: '名字',
        dataIndex: 'studentName',
    },
    {
        title: '课程',
        dataIndex: 'courseName'
    },
    {
        title: '分数',
        dataIndex: 'score'
    }
]);

const dataSource = ref([

])
// 获取所有学生成绩
const getAllStudentScore = async () => {
    const res = await score.getAllStudentScore()
    dataSource.value = res.data.list
}
// 通过学号获取学生信息
const getStudentByNo = async (id) => {
    const res = await student.getStudentByNo(id)
    console.log("res;", res)
    const data = res.data.student
    temStudent.studentName = data.studentName

    // temStudent.studentName = res.data.stduent.studentName
}
const courseList = ref([])
// 获取所有课程
const getAllCourse = async () => {
    const res = await course.getAllCourse()
    courseList.value = res.data.list
    console.log("courseList:", courseList.value)
}

onMounted(() => {
    getAllStudentScore()
})

const open = ref(false)
const studentNo = ref()
// const studentName = ref('')
const temStudent = reactive({
    courseName: '',
    studentNo: '',
    studentName: '',
    score: ''
})
const getStudent = () => {
    studentName.value = "cdw";
}

// 选择课程
const handleChange = value => {
    console.log(`selected ${value}`);
};
// 点击添加成绩
const openAddScore = () => {
    temStudent.studentName = ''
    temStudent.studentNo = ''
    temStudent.score = ''
    temStudent.courseName = ''
    getAllCourse()
    open.value = true
}

// 保存成绩
const saveScore = async () => {
    await score.addStudentScore(temStudent)
    getAllStudentScore()
    open.value = false
}

</script>